<template>
	<view class="waterfulList">
		<view class="content">
			<view class="left">
				<block v-if="leftList.length != 0">
					<item v-for="(item, index) in leftList" :key="index"
						:src="item[avaterKey]" :title="item[titleKey]"
						:isLike="item.isLike"
						:likeNum="item.likeNum"
						:height="item.changHeight"
						:username="item[userKey][userNameKey]"
						:avatar="item[userKey]['avatar']"
						@click="$emit('itemClick', item)"
					></item>
				</block>
					<block v-else>
						<item v-for="(item, index) in cleftList" :key="index"
							:src="item[avaterKey]" :title="item[titleKey]"
							:isLike="item.isLike"
							:likeNum="item.likeNum"
							:height="item.changHeight"
							:username="item[userKey][userNameKey]"
							:avatar="item[userKey]['avatar']"
							@click="$emit('itemClick', item)"
						></item>
					</block>
			</view>
			<view class="right">
				<block v-if="rightList.length != 0">
					<item v-for="(item, index) in rightList" :key="index"
						:isLike="item.isLike"
						:likeNum="item.likeNum"
						:src="item[avaterKey]" :title="item[titleKey]"
						:height="item.changHeight"
						:username="item[userKey][userNameKey]"
						:avatar="item[userKey]['avatar']"
						@click="$emit('itemClick', item)"
					></item>
				</block>
				<block v-else>
					<item v-for="(item, index) in crightList" :key="index"
						:isLike="item.isLike"
						:likeNum="item.likeNum"
						:src="item[avaterKey]" :title="item[titleKey]"
						:height="item.changHeight"
						:username="item[userKey][userNameKey]"
						:avatar="item[userKey]['avatar']"
						@click="$emit('itemClick', item)"
					></item>
				</block>
			</view>
		</view>
		<view class="more">
			<u-loadmore :status="load"
						loadmoreText="点击加载更多..."
						:iconSize="25"
						:fontSize="25"
						@loadmore="$emit('getMore')"
			/>
		</view>
	</view>
</template>

<script>
	import item from "./cpn/item.vue";
	import {
		mergeBackPath
	} from "@/utils/file.js";
	
	export default {
		name:"waterfulList",
		components: {
			item
		},
		props: {
			// 瀑布流左边列表
			leftList: {
				type: Array,
				default: () => ([])
			},
			// 瀑布流右边列表
			rightList: {
				type: Array,
				default: () => ([])
			},
			list: {
				type: Array,
				default: () => ([])
			},
			// 瀑布流块头像的key
			avaterKey: {
				type: String,
				default: "cover"
			},
			// 标题的key
			titleKey: {
				type: String,
				default: "title"
			},
			userKey: {
				type: String,
				default: "articleEditor"
			},
			// 用户名的key
			userNameKey: {
				type: String,
				default: "nickname"
			},
			load: {
				type: String,
				default: "loadmore"
			}
		},
		data() {
			return {
				leftHeight: 0,
				rightHeight: 0
			};
		},
		computed: {
			cleftList() {
				let leftList = [];
				this.list.forEach((item, index) => {
					if(index % 2 == 0) leftList.push(item);
				});
				return leftList;
			},
			crightList() {
				let rightList = [];
				this.list.forEach((item, index) => {
					if(index % 2 != 0) rightList.push(item);
				});
				return rightList;
			}
		},
		filters: {
			getName(value) {
				return value[this.userKey][this.userNameKey];
			},
			dealImage(value) {
				return mergeBackPath(value);
			}
		},
		methods: {
			async dealImge(imgList, key = 'cover', width = 170) {
				let arrLength = imgList.length; // 获取数组长度
				let leftList = []; // 左边列表
				let rightList = []; // 右边列表
				// 定义默认图片
				const defaultImg = "/static/testPic/loginBg3.webp";
				// 循环遍历图片数组
				for (let i = 0; i < imgList.length; i++) {
					// 当不存在图片url时，使用默认图片
					if(key && !imgList[i][key]) imgList[i][key] = defaultImg;
					
					const imgSrc = mergeBackPath(imgList[i][key]);
					imgList[i][key] = imgSrc;
					// 获取图片信息
					let imgInfo = await uni.getImageInfo({
						src: imgSrc
					});
					let {errMsg} = imgInfo[1]; // 获取图片返回值
					// 当图片信息获取成功时
					if(errMsg=='getImageInfo:ok') {
						const realWidth = imgInfo[1].width; // 图片原有宽度
						const realHeight = imgInfo[1].height; // 图片原有高度
						// 375/2 = 187.5 iframe的宽度
						const defineWidth = width; // 给定宽度先
						let HQ_height = ((defineWidth * realHeight) / realWidth); // 计算高度
						imgList[i].changHeight = HQ_height;
						// 判断丢进左右哪个列表里
						// 当左边高度小于右边高度时放左边
						if(this.leftHeight <= this.rightHeight) {
							this.leftHeight += HQ_height;
							leftList.push(imgList[i]);
						}else { // 当左边高度大于右边高度时放右边
							this.rightHeight += HQ_height;
							rightList.push(imgList[i]);
						}
					}else{ // 图片信息获取失败
						this.$msg(errMsg);
					}
				}
				
				
				
				this.leftList = leftList;
				this.rightList = rightList;
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.waterfulList{
	.content{
		width: 100vw;
		// background-color: red;
		display: flex;
		.left{
			margin: 0 10rpx;
		}
		.left, .right{
			/* #ifdef H5 */
			width: 340rpx;
			/* #endif */
			
			/* #ifndef H5 */
			width: 360rpx;
			/* #endif */
			.img{
				min-height: 300rpx;
				max-height: 600rpx;
			}
		}
	}
}
</style>